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Werken met JavaScript: deel 3 


Tips voor je bezoeke 


Tip van de dag: leer alles over strings en arrays in dit laatste deel van de cursus JavaScript. 
Je kent de tips wel die verschijnen wanneer je een toepassing start. Hetzelfde kan je ook on 
line realiseren via een erg eenvoudig scriptje. Enige voorwaarde: je moet kaas gegeten heb- 


ben van strings en arrays. 


Aanhalingstekens 


Nu lijkt dit ingewikkelder dan het is, want 
strings heb je eigenlijk al in het eerste deel (zie 
Clickx 45) leren gebruiken. Toen hadden we 
het namelijk over een stringconstante die je 
gebruikt wanneer je tekst wil weergeven. Strikt 
genomen kan je zeggen dat een string tekst 
bevat die tussen aanhalingstekens staat. Zo- 
als we in het eerste deel gezegd hebben, moet 
dit ofwel tussen dubbele aanhalingstekens 
staan (“tekst”) of tussen enkele aanhalingste- 
kens (‘tekst’). Een combinatie van beide is niet 
toegestaan, tenzij de string zelf al aanha- 
lingstekens bevat. Maar ook hier geldt een ze- 
kere logica. Neem nu bijvoorbeeld de zin: ‘Dit 
is de laatste les,’ zei de docent. Deze zin kan 
je op twee manieren in een string gieten. 
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“Dit is de laatste les,’ zei de docent.” 
Dit is de laatste les,” zei de docent.” 


In zin 1 hebben we de string tussen dubbe- 
le aanhalingstekens geplaatst, omdat de aan- 
halingstekens in de tekst zelf enkelvoudig 
zijn. In zin 2 hebben we dit omgedraaid en 
wordt de string weergegeven via enkelvou- 
dige aanhalingstekens. Vergeet niet dat je 
beide vormen niet mag mengen. Dit zal en- 
kel voor foutmeldingen zorgen! Tot zover 
ging het allemaal nog gemakkelijk. Maar wat 
doen we met volgende zin: D'Hondt zei: ‘Dit 
is de laatste les!’. Hier maken we gebruik 
van een weglatingsteken in een naam, iets 
wat we niet zomaar kunnen weglaten. Wan- 
neer we deze zin zo tussen dubbele aanha- 


Meerdere regels 


lingstekens plaatsen, krijgen we zeker pro- 
blemen aangezien een script debugger zal 
beweren dat hier één aanhalingsteken te veel 
staat. Daarom maken we gebruik van een 
Escape sequence. Het komt erop neer dat je 
aangeeft dat dit een weglatingsteken is en 
geen aanhalingsteken. Dat doe je door een 
schuine streep voor het betrokken teken te 
plaatsen. In ons voorbeeld zou de string er 
dan als volgt uitzien: 


“D\’Hondt zei:’Dit is de laatste les!” 


Hetzelfde geldt voor een dubbel aanha- 
lingsteken dat later niet afgesloten moet wor- 
den. In dat geval wordt het ook voorafgegaan 
door een schuine streep. 


Diezelfde Escape sequence kunnen we inschakelen wanneer we tekst over 
meerdere regels willen spreiden. Dat doe je via ‘\n’. Bijvoorbeeld: 


“Goed JavaScript schrijven, vereist dat je met volgende punten rekening 
houdt: \n Eerst lees je de afspraken terug uit les 1. \n Daarna oefen je de 


andere lessen in.” 


Deze tekst zal als volgt zichtbaar worden: 


Goed JavaScript schrijven, vereist dat je met volgende punten rekening houd: 
Eerst lees je de afspraken terug uit les 1. 


Daarna oefen je de andere lessen in. 


Zoals je merkt, wordt de schuine streep niet weergegeven. Maar wat als je die 
wél wil tonen? Bijvoorbeeld omdat je verwijst naar een bepaalde map op je 


harde schijf? 


“Alle tijdelijke bestanden worden opgeslagen in c:\Windows\Temp” 


Wanneer je dit op deze wijze schrijft, krijg je als resultaat c:WiNpowsTEMpP, en 
dat is niet echt hetzelfde als wat we in gedachten hadden! Daarom is het belang- 
rijk dat je twee schuine strepen na elkaar gebruikt: c:\\Winpows\\TEMP zal wel 


het gewenste resultaat geven. 


rs 


Strings bewerken 


Als je strings enkel kan weergeven zoals ze zijn, heb je er wei- 
nig aan. Gelukkig kan je ook bewerkingen met strings uitvoe- 
ren. Een eerste bewerking hebben we al eens gezien in het 
eerste deel van deze cursus: 


t="Hallo!” 
document. writelt + “Het is een mooie ochtend vandaag!”) 


Het weergegeven resultaat is: 
Hallo! Het is een mooie ochtend vandaag! 


Naast deze bewerking, beschik je nog over een reeks andere me- 
thoden die je kan gebruiken om je strings te manipuleren. We 
zetten ze even op een rijtje. 


Array 


Een array is een verzameling van modules die onafhankelijk van el- 
kaar aangesproken kunnen worden. Je zou het eventueel kunnen 
vergelijken met een appelboom die bestaat uit een stam, takken, bla- 
deren en natuurlijk appelen. leder van die onderdelen kan je afzon- 
derlijk oproepen, maar samen vormen ze de array appelboom. In 
het vorige deel hebben we gezien dat we functies enkel kunnen ge- 
bruiken wanneer we deze eerst aanmaken en vervolgens oproepen. 
Ook een array moet je aanmaken. Begin bijvoorbeeld met: a = new 
Array(). Deze array heeft nog geen elementen, die kunnen we later 
toevoegen of al meteen tussen de haakjes plaatsen. Deze laatste werk- 
wijze heeft de voorkeur omdat je zo minder kans maakt op fouten 
omdat je ook minder moet schrijven. Wil je ze om de één of andere 
reden toch later pas toevoegen, dan doe je dat als volgt: 


a[O]= “wortel”; af 1] = “stam”; a[2] = “tak”; af 3] = “blad”; a[4] 
= “appel; 


Onze variabele is a. Daar hebben we een ‘index’ aan gekoppeld die 
tussen rechte haakjes staat [ ] en aangeeft uit hoeveel delen een array 
bestaat. Let op: we beginnen altijd te tellen vanaf o en niet vanaf 1. 
Zoals we reeds in het begin gezegd hebben, vereist dit heel wat tik- 
werk. Wanneer de array uitgebreid is of wanneer je elementen later 
toevoegt, kan je misschien zelfs fouten maken in het tellen, wat de 
nodige foutboodschappen oplevert. Daarom geven we er de voor- 
keur aan alles tussen de haakjes zelf weer te geven, ditmaal gescheiden 
door een komma. 


a = new Array(“wortel”, “stam”, “tak”, “blad”, “appel”, 5, 78, 
174) 


VOOR GEVORDERDEN D D 2) 


Methode Weergave 
a= “Clickx” Clickx 

t= a.toUpperCasel) CLICKX 
t= a.tolLowerCasel) clickx 

t= a.italic{) Clickx 

t= “Clickx” .boldí() Clickx 


Zoals je merkt in bovenstaande tabel, kan je niet enkel een va- 
riabele (in ons voorbeeld a) een bepaalde vorm geven, maar ook 
een string zoals Clickx. Je plaatst vervolgens een punt (.) en sluit 
aan met de gewenste methode die je vervolgens ook haakjes () 
geeft omdat je anders een foutboodschap krijgt. Overigens zijn 
de mogelijkheden niet beperkt tot de methoden die we hier be- 
handelen. Zo kan je ook sup, big of zelfs fontsize gebruiken. 


Zoals je merkt in het voorbeeld, hoef je niet enkel strings te gebrui- 
ken. Ook andere gegevenstypen die we in deel 1 gezien hebben, ko- 
men in aanmerking. Zo kan een array zelf ook nog een array bevat- 
ten die op zijn beurt weer een array heeft. Dit wordt in het techni- 
sche jargon een multidimensionele array genoemd. 


a = new Array(“stam”, “tak”, “blad”) 
a[1]= new Array(1, 2, 3) 


Dit zijn de twee arrays die we aanmaken. Vervolgens plaatsen we 
volgende regel: 


b=af1[2] 


Kan je aan de hand van bovenstaand script ook de waarde bepalen 
van variabele b? Toch is het eenvoudig: variabele b krijgt te maken 
met array af] en kiest daaruit de waarde [2]. Rekening houdend met 
wat we je net uitgelegd hebben, weet je dat de waarde van b gelijk is 
aan 3 omdat je begint te tellen bij o! 

Net zoals bij strings kan je ook hier gebruik maken van een aantal 
methoden om bewerkingen met arrays uit te voeren. 

Met deze informatie kan je aan de slag met het script dat we voor dit 
deel uitgekozen hebben. 


Methode Resultaat 
a = new Array(1, 2, 3) 
a = a.sortí) A[O]=1; a[1]=2 a[2]=3; 


Mystring= a.join() 
b = a.reversel) 


Mystring= “1, 2, 3” 
bs al 
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Je vindt dit scriptje bij de JavaScript Source: [ http://javascript.in- 
ternet.com/messages/text-randomizer.html |. Het enige wat jij nog 
moet doen, is tips invoegen — en zorgen dat het er voldoende zijn 
om mensen bezig te houden. 


// kkk ok ok oke ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ak ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok oke 


//_<l— This script and many more are available free online at 
—> 

//_<!— The JavaScript Source!! http: //javascript.internet.com 
—> 

//_<l— Original: Andy Angrick/Mike Barone —> 

//_<l— Web Site: http://www.cgiscript.net —> 

// 


A Hok ok ok ok ok oke ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ak ok ok ok ok ok ok oke 


function text() { 


, 


text = new text); 
number = 0; 


Jl textArray 

texi[number++] = “Thanks for using JavaScriptSource.” 
texi[number++] = “Free scripts for everyone!” 

texi[number++] = “Your one stop for all your JavaScript needs.” 
texi[number++] = ‘Tired of the endless plugging.” 
text[number++] = “Well download the script and be gone with 
you.” 

/ Noeg hier nieuwe onderdelen toe… 


increment = Math.floor{Math.random() * number); 

document. writeltext[increment]); 
Zorg wel dat je bij het gebruik van dit script een link maakt naar 
The JavaScript Source! Aan de hand van deze cursus, moet het je 
lukken om de vele scripts die je gratis kan gebruiken, te lezen, te 


analyseren en zelfs te wijzigen. 
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Well dowmload the script and be gone with you 
The JavaScript Source: Messages: Text Randomizer 
Simpty click inside the window below, use your cursor to highkght the script, and copy (ype 


Controle or Apple.c) the script into & new file in your text editor (such as Note Pad or 
Simple Text) and save (Control.s or Command-s). The script is yours! 


HeghghtAn_P IScriptSze- 114KB 


Did vou use this script? Do vou Ike this site? Piease link to usl 


SCA OT) oeeemen: zene (1de we) 


Het script zoals je het op internet vindt 
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Een zin zonder veel franje, maar meer heb je eigenlijk niet nodig. 


// textArray 
text [number++] 
text ([number++] 


"Thanks for using JavaScriptSource." 


ee scripts for everyone!" 


text 


text 


[number++] 


(number++} 


"Your one stop for all your JavaScript needs." 


"Well download the script and be gone with you.” 


text{number++} = "Tired of the endless plugging." 
jk 


// keep adding items here... 


Een array met strings: een betere combinatie konden we hier niet vinden. 
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